<template>
  <div id="app">
    <div v-if="addressMapList.browser === '谷歌'">
      <browser-container v-if="isFullScreen" style="margin-bottom: 103px;position: fixed" :addressMapping="addressMapList.addressMapping" />
    </div>
    <div v-else>
      <browser-container-Ie v-if="isFullScreen" style="margin-right: 120px;position: fixed"  />
    </div>
    <router-view :class="isFullScreen?'isFullScreen':''" />
  </div>
</template>

<script>
import { EventBus } from '@/eventBus.js'; // 更改为正确的路径
import BrowserContainer from './components/BrowserContainer.vue';
import BrowserContainerIe from './components/BrowserToolbarIe.vue';
import { getAddressMappinguList } from '@/services/model/user'
import { setLocalStorageItem } from "@/utils/storage-helper";

export default {
  components: {
    BrowserContainer,
    BrowserContainerIe
  },
  data() {
    return {
      isPC: true,
      isFullScreen: false,
      addressMapList: []
    };
  },
  methods: {
    logCurrentURL() {
      console.log("当前 URL:", this.addressMapList);
      let addressMapList = JSON.parse(JSON.stringify(this.addressMapList));
      const result = addressMapList.find(item => item.menuKey === window.location.pathname);
      const title=document.title
      const index = addressMapList.find((item,index) =>{if( item.menuKey === window.location.pathname){
        return index
      }});
      console.log("当前 result:", result);

      if (result) {
        setLocalStorageItem('addressMapping', result, 1);
        setLocalStorageItem('titleData', title, 1);


        EventBus.$emit('addressMappingChanged', result,titleData); // 触发事件并传递新的 URL 数据
      }
      this.$forceUpdate();
    },

    async getDataList() {
      try {
        let { data } = await getAddressMappinguList();
        this.addressMapList = data;
        this.logCurrentURL();
      } catch (error) {
        console.error('获取地址映射列表失败:', error);
      }
    },

    toggleFullScreen() {
      if (!this.isFullScreen) {
        this.goFullScreen();
      } else {
        this.exitFullScreen();
      }
    },

    goFullScreen() {
      const elem = document.documentElement;

      if (elem.requestFullscreen) {
        elem.requestFullscreen().catch((err) => {
          console.error("Error attempting to enable full-screen mode:", err);
        });
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen().catch((err) => {
          console.error("Error attempting to enable full-screen mode (moz):", err);
        });
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen().catch((err) => {
          console.error("Error attempting to enable full-screen mode (webkit):", err);
        });
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen().catch((err) => {
          console.error("Error attempting to enable full-screen mode (ms):", err);
        });
      } else {
        console.error("Fullscreen API is not supported in this browser.");
      }
    },

    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen().catch((err) => {
          console.error("Error attempting to exit full-screen mode:", err);
        });
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen().catch((err) => {
          console.error("Error attempting to exit full-screen mode (moz):", err);
        });
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen().catch((err) => {
          console.error("Error attempting to exit full-screen mode (webkit):", err);
        });
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen().catch((err) => {
          console.error("Error attempting to exit full-screen mode (ms):", err);
        });
      } else {
        console.error("Fullscreen API is not supported in this browser.");
      }
    },

    checkFullScreen() {
      // 更新 isFullScreen 状态
      this.isFullScreen = !!(
          document.fullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement ||
          document.msFullscreenElement
      );
      // 手动更新数据以触发重新渲染
      this.logCurrentURL();
      this.$forceUpdate();
    },

    handleKeyDown(event) {
      if (event.key === "F11") {
        event.preventDefault();
        this.toggleFullScreen();
      }
    },
  },

  mounted() {
    this.checkFullScreen();
    document.addEventListener('fullscreenchange', this.checkFullScreen);
    document.addEventListener('webkitfullscreenchange', this.checkFullScreen);
    document.addEventListener('mozfullscreenchange', this.checkFullScreen);
    document.addEventListener('msfullscreenchange', this.checkFullScreen);
    document.addEventListener('keydown', this.handleKeyDown);
    this.getDataList();

    // 监听路由变化
    this.$router.afterEach((to, from) => {
      this.logCurrentURL();

    });
  },

  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.checkFullScreen);
    document.removeEventListener('webkitfullscreenchange', this.checkFullScreen);
    document.removeEventListener('mozfullscreenchange', this.checkFullScreen);
    document.removeEventListener('msfullscreenchange', this.checkFullScreen);
    document.removeEventListener('keydown', this.handleKeyDown);
  }
};
</script>
<style lang="less">
/* 为未选中的星星添加边框颜色 */
.ocpcTabs .el-tabs__nav-scroll {
  overflow: hidden;
  padding-left: 24px;
}
.el-table th.el-table__cell {
  background: #EBEDF5 ;
  color: black;
  height:56px
}

.fcSelect {
  width: 200px;
  margin-right: 10px;
  .select-prefix {
    position: absolute;
    left: -10px;
    top:2px;
    line-height: 31px; /* 调整这个值以垂直居中文字 */
    color: #545b66;
    display: block;
    width: 100px; font-weight: 500;
  }

  .el-select .el-input {
    position: relative;
    width: 80%;
  }

  .el-input--prefix .el-input__inner {
    padding-left: 80px; /* 根据文字长度调整 */
    padding-top:1px;
  }
}
#app {
  width: 100%;
  height: 100%;
  background: #F5F6F8;
}
/* 定义滚动条整体部分，包括轨道 */
::-webkit-scrollbar {
  height: 8px;
  width: 0px; /* 可以调整滚动条的宽度 */
  background-color: #f9f9f9; /* 轨道颜色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #c4c4c4; /* 滑块颜色 */
  border-radius: 8px; /* 滑块圆角 */
  border: 2px solid #f9f9f9; /* 滑块边框颜色 */
}

/* 滚动条滑块:hover时的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #afafaf; /* 滑块:hover的颜色 */
}

a {
  color: inherit;
  /*// 链接颜色会继承父元素颜色*/
  text-decoration: none;
  /*// 移除下划线*/
  &:hover,
  &:focus {
    text-decoration: none; // 鼠标悬停或聚焦时的样式
    color: inherit;
  }
}
.el-date-editor .el-range-separator {
  padding: 0 5px;
  line-height: 26px;
  width: 15%;
  font-size: 14px;
  font-weight:500;
  color: rgba(19, 22, 26, 0.9)
}
.el-date-editor .el-range__close-icon {
  display: none;
}
.el-date-editor .el-range-input {
  font-size: 14px;
  font-weight:500;
  color: rgba(19, 22, 26, 0.9)
}

.el-menu-vertical-demo .el-submenu__title i {
  color: rgba(80, 90, 107, 0.8);
  font-weight: 600;
  font-size: 15px;
}
.isFullScreen{
  margin-top: 100px;
  width: 98%;
}
</style>
